<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>IM会话列表</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">

    <!-- Ionicons -->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="/dist/css/skins/_all-skins.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="/plugins/iCheck/flat/blue.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="/plugins/daterangepicker/daterangepicker-bs3.css">
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" href="/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.min.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->


<body class="skin-blue sidebar-mini wysihtml5-supported">
<jsp:include page="header.jsp"/>
<jsp:include page="menu.jsp"/>

<div class="content-wrapper">
    <section class="content-header">
        <h1>
            IM会话列表
            <small>
            </small>

        </h1>
        <ol class="breadcrumb">
            <li><a href="${firstMenuUrl}"><i class="fa fa-dashboard"></i>${firstMenuName}</a></li>
            <li><a href="${secMenuUrl}"><i class="fa fa-dashboard"></i>${secMenuName}</a></li>
            <li class="active">IM会话列表</li>
        </ol>
    </section>

    <section class="content">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">
                    <form action="/cusConversationList" method="POST" id="normalForm">
                        <div class="row">
                            <div class="col-xs-7">
                                会话id<input name="id" id="id" placeholder="关键字" type="text" class="form-control"
                                           value="${param.id}">
                            </div>

                            <div class="col-xs-1">
                                <input type="hidden" name="page" id="page" value="${param.page}">
                            </div>

                            <div class="col-xs-5">
                                &nbsp;
                                <button type="submit" class="btn btn-block btn-primary form-control">查询</button>
                            </div>
                        </div>
                    </form>
                </h3>
            </div>
            <div class="box-body">
                <div id="example2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                    <div class="row">
                        <div class="col-sm-6"></div>
                        <div class="col-sm-6"></div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <table style="table-layout:fixed;" id="example2" class="table table-bordered table-hover dataTable" role="grid"
                                   aria-describedby="example2_info">
                                <thead>
                                <tr role="row">
                                    <th class="sorting_asc" tabindex="0" aria-controls="example2" rowspan="1" style= "width:5%"
                                        colspan="1">会话id
                                    </th>
                                    <th class="sorting_asc" tabindex="0" aria-controls="example2" rowspan="1" style= "width:5%"
                                        colspan="1">会话名称
                                    </th>
                                    <th class="sorting_asc" tabindex="0" aria-controls="example2" rowspan="1" style= "width:5%"
                                        colspan="1">当前序号
                                    </th>
                                    <th class="sorting_asc" tabindex="0" aria-controls="example2" rowspan="1" style= "width:5%"
                                        colspan="1">已持久化序号
                                    </th>
                                    <th class="sorting_asc"    tabindex="0" aria-controls="example2" rowspan="1" style= "width:15%"
                                        colspan="1">最后持久化时间
                                    </th>
                                    <th class="sorting_asc"  tabindex="0" aria-controls="example2" rowspan="1" style= "width:5%"
                                        colspan="1">会话状态
                                    </th>
                                    <th class="sorting_asc"  tabindex="0" aria-controls="example2" rowspan="1" style= "width:20%"
                                        colspan="1">会话成员
                                    </th>
                                    <th class="sorting_asc" tabindex="0" aria-controls="example2" rowspan="1" style= "width:5%"
                                        colspan="1">操作
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:if test="${page.totalPages <= 0}">
                                    <tr>
                                    </tr>
                                    <tr role="row" class="odd">
                                        <td class="sorting_1" colspan="7">暂无数据</td>
                                    </tr>
                                </c:if>
                                <c:forEach var="item" items="${page.content}" varStatus="status">
                                    <tr>
                                    </tr>
                                    <tr role="row" class="odd">
                                        <td class="sorting_1">${item.id}</td>
                                        <td class="sorting_1">${item.name}</td>
                                        <td class="sorting_1">${item.seq}</td>
                                        <td class="sorting_1">${item.dumpseq}</td>
                                        <c:if test="${item.lasttime == null}">
                                        <td class="sorting_1">${item.lasttime}</td>
                                        </c:if>
                                         <c:if test="${item.lasttime != null}">
                                        <td class="sorting_1"><fmt:formatDate value="${item.lasttime}" type="date" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                                        </c:if>
                                        <c:if test="${item.status == 0}">
                                        <td class="sorting_1">解散</td>
                                        </c:if>
                                        <c:if test="${item.status == 1 || item.status == null}">
                                        <td class="sorting_1">正常</td>
                                        </c:if>
                                        <td class="sorting_1" style="overflow: hidden;text-overflow:ellipsis; white-space:nowrap;">${item.members}</td>
                                        <td class="sorting_1">
                                            <sec:authorize url="/cusConversationDetail">
                                                <a href="/cusConversationDetail?id=${item.id}">详细</a>
                                            </sec:authorize>
                                        </td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="row">

                        <c:if test="${page.totalPages > 0}">

                            <div class="col-sm-7">
                                <div class="dataTables_paginate paging_simple_numbers" id="example2_paginate">
                                    <ul class="pagination">
                                        <li class="paginate_button previous" id="example2_previous">
                                            <a aria-controls="example2" data-dt-idx="0" tabindex="0">共${page.totalPages}页</a>
                                        </li>

                                        <c:choose>
                                            <c:when test="${page.firstPage}">
                                                <li class="paginate_button previous disabled" id="example2_previous">
                                                    <a aria-controls="example2" data-dt-idx="0" tabindex="0">首页</a>
                                                </li>
                                                <li class="paginate_button previous disabled" id="example2_previous">
                                                    <a aria-controls="example2" data-dt-idx="0" tabindex="0">上一页</a>
                                                </li>
                                            </c:when>
                                            <c:otherwise>
                                                <li class="paginate_button previous" id="example2_previous">
                                                    <a onclick="normalSubmit(0)" aria-controls="example2" data-dt-idx="0"
                                                       tabindex="0">首页</a>
                                                </li>
                                                <li class="paginate_button previous" id="example2_previous">
                                                    <a onclick="normalSubmit(${page.number - 1})" aria-controls="example2"
                                                       data-dt-idx="0" tabindex="0">上一页</a>
                                                </li>
                                            </c:otherwise>
                                        </c:choose>

                                        <c:if test="${page.totalPages >= 10}">
                                            <c:forEach var="item" begin="1" end="${page.totalPages}">
                                                <c:choose>
                                                    <c:when test="${page.number == item - 1}">
                                                        <li class="paginate_button active">
                                                            <a aria-controls="example2" data-dt-idx="${item}"
                                                               tabindex="0">${item}</a>
                                                        </li>
                                                    </c:when>
                                                    <c:when test="${page.number == page.totalPages - 2}">
                                                        <li class="paginate_button">
                                                            <a onclick="normalSubmit(${item - 1})" aria-controls="example2"
                                                               data-dt-idx="${item}" tabindex="0">...</a>
                                                        </li>
                                                    </c:when>
                                                    <c:otherwise>
                                                        <li class="paginate_button">
                                                            <a onclick="normalSubmit(${item - 1})" aria-controls="example2"
                                                               data-dt-idx="${item}" tabindex="0">${item}</a>
                                                        </li>
                                                    </c:otherwise>
                                                </c:choose>
                                            </c:forEach>
                                        </c:if>

                                        <c:if test="${page.totalPages < 10}">
                                            <c:forEach var="item" begin="1" end="${page.totalPages}">
                                                <c:choose>
                                                    <c:when test="${page.number == item - 1}">
                                                        <li class="paginate_button active">
                                                            <a aria-controls="example2" data-dt-idx="${item}"
                                                               tabindex="0">${item}</a>
                                                        </li>
                                                    </c:when>
                                                    <c:otherwise>
                                                        <li class="paginate_button">
                                                            <a onclick="normalSubmit(${item-1})" aria-controls="example2"
                                                               data-dt-idx="${item}" tabindex="0">${item}</a>
                                                        </li>
                                                    </c:otherwise>
                                                </c:choose>
                                            </c:forEach>
                                        </c:if>

                                        <c:choose>
                                            <c:when test="${page.lastPage}">
                                                <li class="paginate_button previous disabled" id="example2_previous">
                                                    <a aria-controls="example2" data-dt-idx="0" tabindex="0">下一页</a>
                                                </li>
                                                <li class="paginate_button previous disabled" id="example2_previous">
                                                    <a aria-controls="example2" data-dt-idx="0" tabindex="0">末页</a>
                                                </li>
                                            </c:when>
                                            <c:otherwise>
                                                <li class="paginate_button previous" id="example2_previous">
                                                    <a onclick="normalSubmit(${page.number + 1})" aria-controls="example2"
                                                       data-dt-idx="0" tabindex="0">下一页</a>
                                                </li>
                                                <li class="paginate_button previous" id="example2_previous">
                                                    <a onclick="normalSubmit(${page.totalPages - 1})"
                                                       aria-controls="example2" data-dt-idx="0" tabindex="0">末页</a>
                                                </li>
                                            </c:otherwise>
                                        </c:choose>
                                    </ul>
                                </div>
                            </div>
                        </c:if>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>


</div>

<script type="text/javascript">
    function normalSubmit(pageNo){
        $("#page").val(pageNo);
        $("#normalForm").submit();
    }
</script>

<!-- jQuery 2.1.4 -->
<script src="/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="/js/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.5 -->
<script src="/bootstrap/js/bootstrap.min.js"></script>
<!-- Sparkline -->
<script src="/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="/plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="/js/moment.min.js"></script>
<script src="/plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="/dist/js/app.min.js"></script>
</body>
</html>